<template>
  <div class="homepage">
    <div class="section video-test">
      <video src="../assets/video/video01.mp4" width="100%" muted autoplay loop></video>
    </div>

    <div class="section page2">
      <div class="content2">
        <div class="text">
          <p style="color: rgba(0, 0, 0, 1)" class="txt">死亡，就像&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</p>
          <p style="color: rgba(0, 0, 0, 1)" class="txt2"><span style="color: #42b983">「它们」</span>一样&ensp;&ensp;</p>
          <p style="color: rgba(0, 0, 0, 1)" class="txt">回归自然&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</p>
        </div>
      </div>
    </div>

    <div class="section page3">
      <p style="color: black" class="txt3">一封来自</p>
      <span style="color: #42b983" class="txt4">「景德镇」</span>
      <p style="color: black" class="txt5">的信</p>
    </div>

    <div class="section page4">
      <div class="content3">
        <div class="text" style="text-align: center;">
          <p class="sub" style="color: black; margin-top: 0; margin-bottom: 10vh;">为自己购置一款</p>
        </div>

        <div class="commodities" style="display: flex; justify-content: center; width: 1200px; margin: 0 auto;">
          <el-container style="width: 400px" :class="{ 'highlighted': activeProduct === '青叶' }" @mouseover="activeProduct = '青叶'" @mouseleave="activeProduct = ''">
            <div class="commodity">
              <div style="display: flex" @click="redirectToProductPage('青叶')">
                <el-image :src="require('@/assets/images/青叶img.png')" alt="青叶" style="width: 400px; height: auto;"/>
              </div>
            </div>
          </el-container>
          <el-container style="width: 400px" :class="{ 'highlighted': activeProduct === '樱花' }" @mouseover="activeProduct = '樱花'" @mouseleave="activeProduct = ''">
            <div class="commodity">
              <div style="display: flex" @click="redirectToProductPage('樱花')">
                <el-image :src="require('@/assets/images/樱花img.jpg')" alt="樱花" style="width: 400px; height: auto;"/>
              </div>
            </div>
          </el-container>
          <el-container style="width: 400px" :class="{ 'highlighted': activeProduct === '青竹' }" @mouseover="activeProduct = '青竹'" @mouseleave="activeProduct = ''">
            <div class="commodity">
              <div style="display: flex" @click="redirectToProductPage('青竹')">
                <el-image :src="require('@/assets/images/青竹img.png')" :fit="fill" alt="青竹" style="width: 400px; height: auto;"/>
              </div>
            </div>
          </el-container>
        </div>
      </div>
    </div>

  </div>

</template>

<script setup lang="ts">
  import bus from '../bus';
  import router from '../router/router'
  const url1 = '../assets/images/img001.jpg'
  const url2 = '../assets/images/img001.jpg'
  const url3 = '../assets/images/img001.jpg'

  let activeProduct=''

  const redirectToProductPage = (commodity: string) => {
    console.log(commodity)
    bus.emit('choseCommodity',commodity)
    router.push({ name: 'CommodityInfo', params: { commodity: commodity } });
  }
</script>

<style scoped>
.video-test {
  position: relative; /* 固定位置 */
  top: 0; /* 距离浏览器顶部为0 */
  left: 0; /* 距离浏览器左侧为0 */
  right: 0; /* 距离浏览器右侧为0 */
  z-index: 10; /* 确保菜单在其他内容之上 */
  margin: 0; /* 移除外部边距 */
  padding: 0; /* 移除内部边距 */
  width: 100%; /* 宽度为100%，确保填满整个浏览器宽度 */
  height: 100vh; /* 设置整个页面高度为视窗高度 */
}

body {
  margin: 0;
  padding: 0;
}

.homepage {
  display: flex;
  flex-direction: column;
}

.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: black;
  text-align: center;
  /* font-size: 24px; */
  font-weight: bold;
  width: 100%;
  position: relative;
  font-family: 'Eina 01', serif;
}

.page2{
  background-image: linear-gradient(rgba(206, 205, 205, 0.5), rgba(206, 205, 205, 0.5)), url("../assets/images/bg02.png");
  background-size: 100%;
  background-position: center; /* 可以确保背景图在容器内居中显示 */
  background-color: #cecdcd;
  /*opacity: 0.5;*/
}

.page3{
  background-image: url("../assets/images/信封.jpg");
  background-size: 90%;
  background-position: center; /* 可以确保背景图在容器内居中显示 */
  background-color: #cdf6e5;
}

.page4{
  background-size: 100%;
  background-position: center; /* 可以确保背景图在容器内居中显示 */
  background-color: #fcebf2;
}

.content2{
  width: 54%;
}

.content3{
  width: 100%;
}

.highlighted {
  background-color: #ddd; /* 修改为更深的背景颜色 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.text {
  margin-bottom: 10px;
  text-align: center;
}

.text .txt{
  font-size: 5vw;
  font-weight: bold;
  margin: 0;
}

.text .txt2{
  font-size: 6vw;
  font-weight: bold;
  margin: 30px;
}

.txt3{
  font-size: 5vw;
  font-weight: bold;
  margin-top: 0;
}

.txt4{
  font-size: 8vw;
  font-weight: bolder;
}

.txt5{
  font-size: 5vw;
  font-weight: bold;
  margin-bottom: 0;
}

.text .sub {
  font-size: 2.5vw;
}

.commodities{
  display: flex;
  justify-content: center;
  width: 100%;
}

.commodity{
  border-radius: 5px;
  text-align: left;
  margin: 0 10px;
  flex: 1;
  background-color: rgba(203, 217, 250, 0.4);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  /* display: flex; */
  width: 100%;
}

.video-container {
  position: absolute; /* 设置绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-style {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 填充整个容器 */
}

.app-wrapper {
  position: relative; /* 确保视频背景和其他内容有正确的定位上下文 */
  height: 100vh; /* 如果需要的话，设置整个应用的高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  padding: 0;
  z-index: 997; /* 确保菜单在其他内容之上 */
}

.container-full-width {
  /* 确保容器填满整个视口宽度 */
  width: 100%; /* 视口宽度 */
  height: 100vh; /* 视口高度，如果需要的话 */
  display: flex; /* 使用弹性布局来放置视频 */
  justify-content: center; /* 水平居中视频 */
  align-items: center; /* 垂直居中视频 */
  margin: 0; /* 清除边距 */
  padding: 0; /* 清除内边距 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  /*position: fixed; !* 如果需要视频始终保持在视口内 *!*/
  top: 0; /* 如果使用了 fixed 定位 */
  left: 0; /* 如果使用了 fixed 定位 */
  z-index: -1; /* 可能需要调整 z-index 以确保视频在其他内容之下 */
}

</style>